<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>图片上传+剪裁图片demo</title>
		<link href="https:// cdn.bootcss.com/cropper/4.0.0/cropper.css" rel="stylesheet">
		<script src="https:// cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
		<script src="https:// cdn.bootcss.com/cropper/4.0.0/cropper.js"></script>
		<style type="text/css">
			.container {
				border: 1px solid;
				width: 300px;
				height: 300px;
			}
			
			img {
				max-width: 50%;
			}
			
			.canvas>canvas {
				width: 100%;
			}
		</style>
	</head>

	<body>
		<!--图片上传-->
		<input id="uppic" type="file" name="" id="" value="" />
		<button id="getCanvas">剪裁</button>

		<div class="container">
			<img id="miva" src="" />
		</div>

		<div style="width: 150px; height: 150px;" id="" class="canvas"></div>

		<script type="text/javascript">
			"use strict";

			// 图片上传
			$('#uppic').on('change', function() {

				var files = $('#uppic').prop('files');
				var reader = new FileReader();

				reader.readAsDataURL(files[0]);

				reader.onload = function(e) {
					var filebuffer = e.target.result;
					$('#miva').attr('src', filebuffer);
					cutPIc()
				};

			})

			// 图片剪裁
			function cutPIc() {

				$('#miva').cropper({
					aspectRatio: 1 / 1,
					strict: true, // 在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。 默认值为true
					responsive: true, // 是否在窗口尺寸改变的时候重置cropper。 默认值为true
					checkImageOrigin: true, // 默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。 默认值 true
					background: true, // 是否在容器上显示网格背景。
					modal: true, // 是否在剪裁框上显示黑色的模态窗口。
					guides: true, // 是否在剪裁框上显示虚线。
					highlight: true, // 是否在剪裁框上显示白色的模态窗口。
					autoCrop: true, // 类型: Boolean，默认值true。	是否在初始化时允许自动剪裁图片。
					autoCropArea: 0.8, // 类型: Number，默认值0.8（图片的80%）。	0-1之间的数值，定义自动剪裁区域的大小。
					dragCrop: true, // 类型: Boolean，默认值true。	是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
					dragMode: 'crop', // 类型: String 默认: ‘crop’ 选项: ‘crop’: 可以产生一个新的裁剪框3 ‘move’: 只可以移动3 ‘none’: 什么也不处理
					toggleDragModeOnDblclick: true, // 双击切换模式
					movable: true, // 类型: Boolean，默认值true。	是否允许移动剪裁框。
					resizable: true, // 类型: Boolean，默认值true。	是否允许改变剪裁框的大小。
					zoomable: true, // 类型: Boolean，默认值true。	是否允许放大缩小图片。
					mouseWheelZoom: true, // 类型: Boolean，默认值true。	是否允许通过鼠标滚轮来缩放图片。
					touchDragZoom: true, // 类型: Boolean，默认值true。	是否允许通过触摸移动来缩放图片。
					rotatable: true, // 类型: Boolean，默认值true。	是否允许旋转图片。
					minContainerWidth: 200, // 类型: Number，默认值200。	容器的最小宽度。
					minContainerHeight: 100, // 类型: Number，默认值100。	容器的最小高度。
					minCanvasWidth: 0, // 类型: Number，默认值0。	canvas 的最小宽度（image wrapper）。
					minCanvasHeight: 0, // 类型: Number，默认值0。	canvas 的最小高度（image wrapper）。
					build: function() {}, // 类型: Function，默认值null。	build.cropper事件的简写方式。
					built: function() {}, // 类型: Function，默认值null。	built.cropper事件的简写方式。
					dragstart: function() {}, // 类型: Function，默认值null。	dragstart.cropper事件的简写方式。
					dragmove: function() {}, // 	类型: Function，默认值null。	dragmove.cropper事件的简写方式。
					dragend: function() {}, // 类型: Function，默认值null。	dragend.cropper事件的简写方式。
					zoomin: function() {}, // 类型: Function，默认值null。	zoomin.cropper事件的简写方式。
					zoomout: function() {}, // 类型: Function，默认值null。	zoomout.cropper事件的简写方式。
					crop: function() {} // 类型: Function，默认值null。	crop.cropper事件的简写方式。
				});

				// 点击剪裁图片
				$('#getCanvas').on('click', function() {
					console.log($('#miva').cropper('getCroppedCanvas'));

					var cas = $('#miva').cropper('getCroppedCanvas');
					var base64url = cas.toDataURL('image/jpeg');

					cas.toBlob(function(e) {
						console.log(e)
					});

					console.log(base64url);
					$('.canvas').html(cas)
				});
			}
		</script>
	</body>

</html>